@charset "UTF-8";
@import "../lib/animates.css";


// 定义设计图尺寸
@design: 750;
// 基准值
@base: @design / 10;

/* 清除默认的外边距和内边距 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
img {
  margin: 0;
  padding: 0;
}

img,
input,
button,
textarea {
  border: none;
  padding: 0;
  margin: 0;
  outline-style: none;
}

ul,
ol {
  list-style: none;
  font-size: 12px;
}

input {
  font-family: "SimSun", "宋体";
}

select,
input,
textarea {
  font-size: 12px;
  margin: 0;
}

textarea {
  resize: none;
}

img {
  border: 0;
  /* 可以防止 img 下边出现缝隙问题 */
  vertical-align: middle;
}


body,
html {
  /* 将整个页面的字体, 默认重置 */
  font-size: 12px;
  color: #666;
  background: #fff;
  --themeColor: #fabbd8;
}

p,
span,
i {
  font-size: 12px;
}

a {
  color: #666;
  text-decoration: none;
  font-size: 12px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
}

/* 废物利用 1*/
s,
i,
em {
  font-style: normal;
  text-decoration: none;
}

div {
  font-size: 0;
}


.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineEllipsis(@num) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @num;
  overflow: hidden;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  // max-width: 527px;
}

.l50 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.t50 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.cen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// @await: 0s;
.ani(@name, @second, @await: (0s)) {
  animation: @name @second @await both;
}

.infinite {
  animation-iteration-count: infinite;
}

// hover
.h5_show .edit:hover {
  cursor: all-scroll;
  outline: 2px solid #1491fc;
}

.m0(@top: 0, @bot: 0) {
  margin: @top auto @bot;
  text-align: center;
}

@media screen and (min-width:527px) {

  html,
  body {
    font-size: 52.7px !important;
  }
}



// loop
.loop-ani(@n, @i: 1) when (@i <=@n) {
  &:nth-child(@{i}) {
    .ani(@name, 1s, 0s+@i/3);
  }

  .loop-ani(@n, (@i + 1));
}


.container {
  height: 100vh;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  overflow: hidden;
  height: 100%;

  &>div {
    width: 100%;
    height: 100%;
  }
}


html,
body {
  color: #494949;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;

  @media (min-aspect-ratio: ~'10/16') and (min-width: 768px) {
    & {
      // width: 750rem/@base;
      width: 10rem;
      margin: 0 auto;
    }
  }
}

@media (max-width:319px) {
  html {
    widthrunning: 320px;
    overflow-x: auto;
  }
}

@media (max-height:568px) {
  html {
    height: 568px;
    overflow-y: auto;
  }
}

@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


.audio-box {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  width: 30px;
  height: 30px;
  background: url('../images/music.png') no-repeat center center;
  background-size: 100%;
  animation: spinner 2s linear infinite;
  animation-play-state: paused;
}
